<template>
	<view class="container">
		<view class="tui-bg-box">
			<image src="../../static/images/login/bg_login.png" class="tui-bg-img"></image>
			<image :src="myImgLogo" class="tui-photo"></image>
			<view class="tui-login-name">{{myName}}</view>
		</view>
		<form @submit="formLogin">
			<view class="tui-login-from">
				<view class="tui-line-cell">
					<tui-icon name="mail" :size="20" color='#5677fc'></tui-icon>
					<input placeholder-class="phcolor" class="tui-input" name="email" placeholder="请输入你的邮箱" maxlength="30" v-model="email" type="text" />
				</view>
				<view class="tui-line-cell tui-top28">
					<tui-icon name="pwd" :size="20" color='#5677fc'></tui-icon>
					<input placeholder-class="phcolor" class="tui-input" name="smsCode" placeholder="请输入验证码" maxlength="6" />
					<tui-button size="mini" :type="type" shape="circle" :plain="true" :disabled="disabled" @click="btnSend">{{btnText}}</tui-button>
				</view>
				<button class="btn-primary tui-btn-submit" hover-class="btn-hover" form-type="submit">绑定电子邮箱</button>
				<view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">
					<text class="tui-protocol-red">请用你的常用邮箱登录，一经绑定无法更改</text>
					<br><br>
					发送成功之后请到你的邮箱里面查找邮件
					<br><br>
					（有可能会在你的垃圾箱）
					<br><br>
					<text class="tui-protocol-red">如果你已收到验证码<br>请直接输入邮箱和验证码进行绑定</text>
					<br><br><br><br><br><br><br><br>
				</view>
			</view>
		</form>
	</view>
</template>

<script>

	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	const util = require('../../utils/util.js')
	export default {
		components: {
			footerMenu,
			tuiIcon,
			tuiButton
		},
		data() {
			return {
				disabled: false,
				btnText: "获取验证码",
				email: "",
				type: "primary",
				code: "",
				
				myId: 0,
				myName: '',
				myPhone: '',
				myEmail: '',
				myImgLogo: '',
			}
		},
		methods: {
			
			getMyBaseInfo: function(){
				uni.request({
				    url: this.$apiUrl+ '/api/user/baseInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
            'shopId': uni.getStorageSync('shopId')
					},
				    success: (res) => {
					//	console.log(res.data['data']);
						let resData = res.data['data'];
						this.myId = resData.id;
						this.myName = resData.name;
						this.myPhone = resData.phone;
						this.myEmail = resData.email;
						this.myImgLogo = resData.img_logo;
					}
				});
			},
			
			btnSend: function() {
				if(this.myEmail){
					this.tui.toast('你已经绑定过电子邮箱');
					return
				}
				if (util.isNullOrEmpty(this.email)) {
					this.tui.toast('请输入电子邮箱');
					return
				}
				this.disabled = true;
				this.btnText = "请稍候...";
				this.type = "gray";
				
				//真实的去发送短信验证码
				uni.request({
					url: this.$apiUrl+ '/api/my/send-bind-email',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
            'shopId': uni.getStorageSync('shopId')
					},
					data: {
						email: this.email,
					},
				    success: (res) => {
						let resMsg = res.data['msg'];
						let resErr = res.data['error'];
						this.tui.toast('请注意查收你的邮箱');
					}
				});
			},
			
			formLogin: function(e) {
				let smsCode = e.detail.value.smsCode;
				let email = e.detail.value.email;
				if (util.isNullOrEmpty(email)) {
					this.tui.toast('请输入电子邮箱');
					return
				} else if (util.isNullOrEmpty(smsCode)) {
					this.tui.toast('请输入验证码');
					return
				}
				
				//绑定手机号
				uni.request({
					url: this.$apiUrl+ '/api/my/bind-main-email',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
            'shopId': uni.getStorageSync('shopId')
					},
					data: {
						email: email,
						sms_code: smsCode
					},
					success: (res) => {
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						if(resErr == 0) {
							this.tui.toast("手机号绑定成功", 2000, true);
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/my/base-info'
								});
							}, 2000);
						}else{
							this.tui.toast(resMsg, 2000, false);
						}
					}
				});
			},
		},
		
		onLoad: function(options) {
			this.getMyBaseInfo();
		},
	}
</script>

<style>
	page {
		background: #fff;
	}

	.tui-bg-box {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding-top: 44upx;
	}

	.tui-photo {
		height: 138upx;
		width: 138upx;
		display: block;
		margin: 10upx auto 0 auto;
		border-radius: 50%;
		position: relative;
		z-index: 2;
	}

	.tui-login-name {
		width: 128upx;
		height: 40upx;
		font-size: 30upx;
		color: #fff;
		margin: 36upx auto 0 auto;
		text-align: center;
		position: relative;
		z-index: 2;
	}

	.tui-bg-img {
		width: 100%;
		height: 346upx;
		display: block;
		position: absolute;
		top: 0;
	}

	.tui-login-from {
		width: 100%;
		padding: 128upx 104upx 0 104upx;
		box-sizing: border-box;
	}

	.tui-input {
		font-size: 32upx;
		flex: 1;
		display: inline-block;
		padding-left: 32upx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell {
		padding: 27upx 0;
		display: -webkit-flex;
		display: flex;
		-webkiit-align-items: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1upx solid #e0e0e0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-top28 {
		margin-top: 28upx;
	}

	.tui-btn-class {
		width: 196upx !important;
		height: 54upx !important;
		border-radius: 27upx !important;
		font-size: 28upx !important;
		padding: 0 !important;
		line-height: 54upx !important;
	}

	.tui-btn-submit {
		margin-top: 100upx;
	}

	.tui-protocol {
		color: #333;
		font-size: 24upx;
		text-align: center;
		width: 100%;
		margin-top: 29upx;
	}

	.tui-protocol-red {
		color: #f54f46;
	}
</style>